<template>
  <SwModal :isShow.sync="isShowPostAdBox" :isShowBg="true" :okText="''" :isCloseOnClickBg="true" :onClosed="onClosed">
    <div class="publishAdvertisement">
      <a class="close" @click="closePublishAdvertisement"><img src="./../images/close2.png"></a>
      <dl class="title">
        <dt>{{lang['issue a trade order']}}</dt>
      </dl>
      <dl class="title" v-show="currentFeeConfig.EnsureAmount > 0">
        <dd v-show="!advertisebuyOrSell">
          <a>
            <em>{{lang['check account balance']}}</em>
          </a>
          <span>
            {{lang['payment margin']}}:
            {{getCustomerInfoList.Bond | ceilDecimal(getCustomerInfoList.Precision) | currency('USD', '', getCustomerInfoList.Precision || 0) | fillDecimal(getCustomerInfoList.Precision || 0)}}
            {{getCustomerInfoList.AssetCode || ''}}
          </span>
        </dd>
      </dl>
      <p class="tabNav">
        <a v-bind:class="{green: !advertisebuyOrSell}" @click="buyadVertisement">
          {{lang['buy for a rise']}}
          {{pair.coinCode}}
        </a>
        <a v-bind:class="{red: advertisebuyOrSell}"  @click="sellAdvertisement">
          {{lang['offtake']}}
          {{pair.coinCode}}
        </a>
      </p>
      <ul class="list">
        <li style="padding:20px 0 0;">
          <div class="form-group">
          <p class="autoConfiguration" @click="autoConfiguration" :class="[advertisebuyOrSell ? {red: isSlidingScales} : {green: isSlidingScales}]">
            {{lang['automatic setting with exponential price']}}
          </p>
          </div>
        </li>

        <li v-show="isSlidingScales">
          <label>{{lang['sliding scales']}}</label>
          <div class="form-group">
            <input type="text" name="" maxlength="6" value="" class="inputCurrentIndex" v-model="slidingScalesValue" ref="slidingScalesValue" @keyup="calculateScalePrice">
            <font class="cny percentage">%</font>
            <span class="currentIndex">
              {{lang['current index']}}:
              {{currentNumber | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}} {{pair.currencyCode}}
            </span>
          </div>
        </li>

        <li>
          <label>{{lang['price']}}</label>
          <div class="form-group">
            <em v-show="isSlidingScales">
              {{floatPrice | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}}
            </em>
            <input type="text" name="" value="" maxlength="9" v-model="advertisePrice" ref="advertisePrice" @keyup="calculateScalePrice" v-show="!isSlidingScales">
            <font class="cny">{{pair.currencyCode}}</font>
          </div>
        </li>

        <li>
          <label>{{lang['quantity']}}</label>
          <div class="form-group">
            <input type="text" name="" value="" maxlength="9" v-model="advertiseQuantity" ref="advertiseQuantity" @keyup="calculateScalePrice">
            <font class="cny">{{pair.coinCode}}</font>
          </div>
        </li>

        <li>
          <label>{{lang['amount of money']}}</label>
          <div class="form-group">
            <em>{{advertiseAmount | currency('USD', '', 2) | fillDecimal(2)}}</em>
            <font class="cny">{{pair.currencyCode}}</font>
          </div>
        </li>

        <li class="noMarginBuyer"  v-show="advertisebuyOrSell && currentFeeConfig.DepositAmount > 0">
          <label><span>{{lang['whether to accept no margin buyer']}}</span></label>
          <div class="form-group"  style="width:260px">
            <a @click="isBailnBtn" :class="{active : !isBailn}">{{lang['deny']}}</a>
            <a @click="isBailnBtn" :class="{active : isBailn}">{{lang['yes']}}</a>
          </div>
        </li>

      </ul>

      <div class="modePayment">
        <h3 class="title">
          <font v-show="!advertisebuyOrSell">{{lang['c2c select the terms of payment you can provide']}}</font>
          <font v-show="advertisebuyOrSell && (bankPayList.length || aliPayList.length || wechatPayList.length)">
            {{lang['c2c select the collection method you can provide']}}
          </font>
        </h3>

        <div  v-show="!advertisebuyOrSell">
          <div class="item" v-for="(item, index) in getPayTypeList" @click="toggleBuySelect(item, index)">
            <em :class="{active: item.isSelected}"></em>
            <label>
              <img :src="'/static/images/ctc/' + item.Remark + (pair.currencyCode || 'CNY') + (item.isSelected ? '' : '2') + '.png'">
              {{lang[item.Remark]}}
            </label>
          </div>
        </div>

        <div v-show="advertisebuyOrSell && (bankPayList.length || aliPayList.length || wechatPayList.length)">

          <div class="item bank" v-show="bankPayList.length">
            <em @click="toggleSellBankSelect" :class="{active: sellBankInfo}"></em>
            <label :class="{hover: isToggleSellBank}" @click="isToggleSellBank = !isToggleSellBank">
              <img :src="'/static/images/ctc/Bank' + (pair.currencyCode || 'CNY') + (sellBankInfo ? '' : '2') + '.png'">
              {{sellBankInfo ?　sellBankInfo : lang['Bank']}}
            </label>
            <div class="selectBank" v-show="isToggleSellBank">
              <a v-for="(item, index) in bankPayList" @click="toggleSellSelect(bankPayList, item, index)">
                {{item.BankName}} ({{item.CardNumber.replace(/[^0-9a-zA-Z_]/g, '')}})
              </a>
            </div>
          </div>

          <div class="item" v-for="(item, index) in aliPayList" @click="toggleSellSelect(aliPayList, item, index)"  v-show="aliPayList.length">
            <em :class="{active: item.isSelected}"></em>
            <label>
              <img :src="'/static/images/ctc/Alipay' + (pair.currencyCode || 'CNY') + (item.isSelected ? '' : '2') + '.png'">
              {{lang['Alipay']}}
            </label>
          </div>

          <div class="item" v-for="(item, index) in wechatPayList" @click="toggleSellSelect(wechatPayList, item, index)" v-show="wechatPayList.length">
            <em :class="{active: item.isSelected}"></em>
            <label>
              <img :src="'/static/images/ctc/WebChat' + (pair.currencyCode || 'CNY') + (item.isSelected ? '' : '2') + '.png'">
              {{lang['WebChat']}}
            </label>
          </div>
        </div>

        <p class="warn">{{lang['c2c withheld transaction is concluded']}}:
          <font v-show="!advertisebuyOrSell">
            {{poundageRate(currentFeeConfig.BuyFeeRate, currentFeeConfig.BuyMinFee) | currency('USD', '', pair.coinPrec) | fillDecimal(pair.coinPrec)}}
          </font>
          <font v-show="advertisebuyOrSell">
            {{poundageRate(currentFeeConfig.SellFeeRate, currentFeeConfig.SellMinFee) | currency('USD', '', pair.coinPrec) | fillDecimal(pair.coinPrec)}}
          </font>

          {{pair.coinCode}}
        </p>
      </div>
      <button type="button" class="subtimBox green" :class="{active: !clickIsButton}" @click="buyAdvertiseBtn" v-show="!advertisebuyOrSell">
        {{lang['release payment']}}
      </button>
      <button type="button" class="subtimBox red" :class="{active: !clickIsButton}" @click="sellAdvertiseBtn" v-show="advertisebuyOrSell">
        {{lang['issue a sales order']}}
      </button>
    </div>
  </SwModal>
</template>

<script>
import router from '@/router/index.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import CheckCurrencyOnInput from '@/utils/CheckCurrencyOnInput.js'
import commonFilter from '@/filters/common.js'
import EventBus from '@/service/EventBus.js'
import Decimal from '@/libs/decimal.min.js'

export default {
  props: {
    lang: {},
    propIsShowPostAdBox: {}, // 弹窗控制
    customerVerification: {}, // 获取用户凭证信息
    currentCoinAsset: {}, // 获取币的可用数量
    currentFeeConfig: {},
    pair: {},
    pairInfo: {},
    getPayTypeList: {}, // 买入 支持的付款方式
    payList: {}, // 卖出支持的收款方式
    getCustomerInfoList: {},
    getKYCRuleList: {} // 是否需要身份认证
  },
  data () {
    return {
      isShowPostAdBox: false, // 控制发布广告弹窗
      advertisebuyOrSell: false, // falle 发布买广告 true 发布卖广告
      isSlidingScales: false, // 是否浮动比例 以指数价格自动设定
      isBailn: false, // 是否无保证金
      advertisePrice: '',  // 发布交易 价格
      floatPrice: '', // 显示计算价格
      slidingScalesValue: 100, // 浮动比例
      advertiseQuantity: '', // 发布交易 数量
      advertiseAmount: '', // 发布交易 总金额
      currentNumber: '', // 指数
      clickIsButton: true,
      isToggleSellBank: false,
      isToggleAlipay: false,
      isToggleWechat: false,
      sellBankInfo: '',
      buyPayKeys: '',
      sellPayIds: '',
      wechatPayList: [],
      aliPayList: [],
      bankPayList: []
    }
  },
  watch: {
    isShowPostAdBox (nv) {
      this.$emit('update:propIsShowPostAdBox', nv)
    },
    propIsShowPostAdBox (nv) {
      this.isShowPostAdBox = nv
      this.isBailn = this.currentFeeConfig.DepositAmount <= 0  //  判断是保证金为0 不显示卖出 是否接受保证金
    },
    payList () {
      this.bankPayList = this.payList.Bank.Data || []
      this.aliPayList = this.payList.AliPay.Data || []
      this.wechatPayList = this.payList.WechatPay.Data || []
    },
    pairInfo () {
      this.calculateScalePrice()
    }
  },
  components: {
    SwModal
  },
  methods: {
    // 买入 支付方式选择
    toggleBuySelect (item, index) {
      item.isSelected = !item.isSelected
      this.$set(this.getPayTypeList, index, item)
    },
    joinBuyPayList () {
      let isSelected = this.getPayTypeList.filter((item) => {
        return item.isSelected
      })
      this.buyPayKeys = isSelected.map((item) => {
        return item.Key
      })
      this.buyPayKeys = this.buyPayKeys.join(',')
    },
    // 发布买单选择收款信息
    toggleSellSelect (list, item, index) {
      // 银行卡的时候选择
      if (list === this.bankPayList) {
        this.bankPayList.forEach((item, index) => {
          item.isSelected = false
          this.$set(this.bankPayList, index, item)
        })

        item.isSelected = true
        this.$set(this.bankPayList, index, item)

        // 调用选中信息
        this.setSellBankInfo(item)
      } else {
        // 微信 支付宝的时候切换
        item.isSelected = !item.isSelected
        this.$set(list, index, item)
      }
    },
    // 调用 选中 银行卡信息
    setSellBankInfo (item) {
      this.sellBankInfo = item.BankName + ' ' + '(' + item.CardNumber.replace(/[^0-9a-zA-Z_]/g, '') + ')'
      this.isToggleSellBank = false
    },
    joinSellPayList () {
      let payList = this.bankPayList.concat(this.aliPayList, this.wechatPayList)
      let isSelected = payList.filter((item) => {
        return item.isSelected
      })
      payList = isSelected.map((item) => {
        return item.ID
      })
      this.sellPayIds = payList.join(',')
    },
    // 发布卖单 清空选择 展开选择项
    toggleSellBankSelect () {
      this.isToggleSellBank = !this.isToggleSellBank

      if (this.sellBankInfo) {
        this.sellBankInfo = ''
        // 清空所有选择的银行卡
        this.bankPayList.forEach((item, index) => {
          item.isSelected = false
          this.$set(this.bankPayList, index, item)
        })
      }
    },
    poundageRate (FeeRate, MinFee) {
      FeeRate = new Decimal(FeeRate || 0)
      FeeRate = FeeRate.mul(this.advertiseQuantity || 0).toFixed(10)
      return FeeRate
    },

    // 发布 买 广告
    empty () {
      this.isSlidingScales = false // 清空以指数价格自动设定
      this.advertisePrice = '' // 清空价格
      this.slidingScalesValue = 100 // 清空浮动比例
      this.advertiseQuantity = '' // 清空数量
      this.advertiseAmount = '' // 清空金额
    },
    inputImport () {
      if (!this.isSlidingScales && !parseFloat(this.advertisePrice)) { // 没有自动设定价格的时候 判断是否输入价格
        ModalApi.message(this.lang['please enter the value declared']) // '请输入申报价格'
        return false
      }
      if (this.isSlidingScales && !this.slidingScalesValue) {
        ModalApi.message(this.lang['please enter the floating ratio']) // '请输入浮动比例'
        return false
      }
      if (!this.advertiseQuantity) {
        ModalApi.message(this.lang['please enter quantity'])  // '请输入数量'
        return false
      }
      return true
    },
    buyadVertisement () {
      this.advertisebuyOrSell = false  // 显示发布买广告元素
      this.empty()
    },
    // 卖 发广告
    sellAdvertisement () {
      this.advertisebuyOrSell = true // 显示发布卖广告元素
      this.empty()
    },
    // 设置浮动比例切换
    autoConfiguration () {
      this.isSlidingScales = !this.isSlidingScales
      this.slidingScalesValue = 100 // 清空浮动比例
      this.calculateScalePrice()
    },
    // 是否接受无保证金 切换
    isBailnBtn () {
      this.isBailn = !this.isBailn
    },
    // 发布买卖广告 输入计算价格
    calculateScalePrice () {
      if (this.isSlidingScales === true) {
        this.currentNumber = this.pairInfo.CurrentPrice || 0

        let slidingScalesValue = Decimal.div(this.slidingScalesValue, 100).toFixed(10)
        slidingScalesValue = commonFilter.fillDecimal(slidingScalesValue, 4)

        this.floatPrice = Decimal.mul(this.pairInfo.CurrentPrice, slidingScalesValue).toFixed(10)
        this.floatPrice = commonFilter.fillDecimal(this.floatPrice, this.pair.cyPrec) // 计算浮动金额

        this.advertiseAmount = commonFilter.fillDecimal(Decimal.mul(this.floatPrice, parseFloat(this.advertiseQuantity) || 0).toFixed(10), 2) // 计算总金额
      } else {
        this.advertiseAmount = commonFilter.fillDecimal(Decimal.mul(parseFloat(this.advertisePrice) || 0, parseFloat(this.advertiseQuantity) || 0).toFixed(10), 2) // 计算输入价格
      }
    },
    undermargined () {
      // let ensureAmount = commonFilter.currency(commonFilter.ceilDecimal(this.getCustomerInfoList.Bond, this.getCustomerInfoList.Precision) || 0, 'USD', '', this.getCustomerInfoList.Precision)

      // ensureAmount = commonFilter.fillDecimal(ensureAmount, this.getCustomerInfoList.Precision)

      let handle = ModalApi.confirm({
        modalClass: 'commonModal',
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        title: 'prompt message',
        content: () => {
          return this.lang['lower thanthanthan']
            .replace('{EnsureAmount}', this.currentFeeConfig.EnsureAmount)
        },
        noText: '',  // '取消',
        okText: 'recharge', // '充值',
        isShowBg: true,
        ok: () => {
          router.push({path: '/assets'})
          handle.close()
        }
      })
    },
    verifyResult (number) {
      // 筛选是否需要身份认证
      let IsEnaled =''
      for (let i=0; i < this.getKYCRuleList.length; i++) {
        if (this.getKYCRuleList[i].ConstraintRange === number) {
          IsEnaled = this.getKYCRuleList[i].IsEnaled
        }
      }
      // 判断是否需要认证
      if (IsEnaled && this.customerVerification.VerifyResult !== 2) {
        let content;
        let okText = "to authenticate";
        if (this.customerVerification.VerifyResult === 0) {
          content = "c2c sell buy real name authentication"; // '您还没有实名认证，不能交易',
        }
        if (this.customerVerification.VerifyResult === 1) {
          content = "c2C your real name certification failed"; // "您的实名认证未通过，请重新认证"
        }
        if (this.customerVerification.VerifyResult === 3) {
          // 您的实名认证正在审核中，请耐心等待'
          content = "42075";
          okText = "determineBth";
        }
        let that = this
        let handle = ModalApi.confirm({
          isShowCloseBtn: true,
          isCloseOnClickBg: true,
          modalClass: "commonModal smallModal",
          title: "prompt message",
          content: content,
          noText: "", // '取消',
          okText: okText, // '去认证',
          isShowBg: true,
          ok: () => {
            // 审核中不需要跳去认证
            that.customerVerification.VerifyResult !== 3 && that.$router.push({ path: "/safety?isToggleCaidVerified=true" });
            handle.close();
          }
        });
        return false
      }
      return true
    },
    // 发布买 广告
    buyAdvertiseBtn () {
      if (!this.inputImport()) {
        return
      }

      this.joinBuyPayList()
      if (!this.buyPayKeys) {
        ModalApi.message(this.lang['51084'])
        return
      }

      // 判断是否需要认证
      if (!this.verifyResult(1)) {return}

      if (this.advertiseQuantity < this.currentFeeConfig.BuyMinQuantity) {
        let Warning = this.lang['Buying quantity is less than'] + this.currentFeeConfig.BuyMinQuantity + ' ' + this.pair.coinCode
        ModalApi.message(Warning)
        return
      }

      // 判断是否有等值的保证金
      if (!this.getCustomerInfoList.IsEquivalentBond) {
        this.undermargined()// 弹窗调用
      } else {
        if (!this.clickIsButton) {
          return
        }
        this.clickIsButton = false
        // 提交数据
        let slidingScalesValue = Decimal.div(this.slidingScalesValue, 100).toFixed(10)
        slidingScalesValue = commonFilter.fillDecimal(slidingScalesValue, 4)
        this.$host2.post('Trade/SendOrder', {
          CoinCode: this.pair.coinCode, // 虚拟币 Code
          CurrencyCode: this.pair.currencyCode,  // 法币 Code
          Price: this.isSlidingScales ? this.floatPrice : this.advertisePrice, // 申报价
          Quantity: this.advertiseQuantity, // 申报数量
          IsAcceptedWarranty: false, // 是否接受无保证金交易
          TradeSide: 0, // 0为发布买广告 1为发布卖广告
          FluctuationRate: this.isSlidingScales ? slidingScalesValue : 0, // 使用浮动价格的时候  传浮动价格，否则传0
          PayTypes: this.buyPayKeys,
          PayIds: ''
        }, {
          ignorableCodes: '51041,51050,51055,51021'
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.isShowPostAdBox = false
            this.empty()
            ModalApi.message(this.lang['success'])
            setTimeout(() => {
              this.$emit('refreshCurrentAdList')
              EventBus.$emit('refreshMyOrderList')
            }, 1000)
          } else if (res.StatusCode === '51050' || res.StatusCode === '51041' || res.StatusCode === '51055' || res.StatusCode === '51021') {
            this.empty()
            this.undermargined() // 保证金不足提示
          }
          this.clickIsButton = true
        })
      }
    },

    // 发布卖出广告
    sellAdvertiseBtn () {
      if (!this.inputImport()) {
        return
      }

      // 判断是否需要认证
      if (!this.verifyResult(5)) {return}

      // 判断是否设置收款信息
      if (!this.customerVerification.IsSetReceiveAccount) {
        let handle = ModalApi.confirm({
          modalClass: 'commonModal',
          isShowCloseBtn: true,
          isCloseOnClickBg: true,
          title: 'prompt message',
          content: 'You have not set up the collection information', // '您尚未设置收款信息!',
          noText: '', // '取消',
          okText: 'set up', // '设置',
          isShowBg: true,
          ok: () => {
            router.push({path: '/assets/bankcard'})
            handle.close()
          }
        })
        return
      }

      // 判断是否绑定手机号
      if (!this.customerVerification.IsBindingPhone) {
        let handle = ModalApi.confirm({
          modalClass: 'commonModal',
          isShowCloseBtn: true,
          title: 'prompt message',
          content: 'you are not yet bound to the phone', // '该账号没有绑定手机号',
          noText: '', // '取消',
          okText: 'bindings', // '去绑定',
          isShowBg: true,
          ok: () => {
            router.push({path: '/safety?isTogglePhone=true'})
            handle.close()
          }
        })
        return
      }

      // 判断卖出数量是否大于可用数量
      if (this.currentCoinAsset.AvailableAmount < this.advertiseQuantity) {
        let Warning = this.lang['not sufficient funds'] // '余额不足'
        ModalApi.message(Warning)
        return
      }

      if (this.advertiseQuantity < this.currentFeeConfig.SellMinQuantity) {
        let Warning = this.lang['Sell quantity is less than'] + this.currentFeeConfig.SellMinQuantity + ' ' + this.pair.coinCode
        ModalApi.message(Warning)
        return
      }
      // 判断是否选择收款方式
      this.joinSellPayList()
      if (!this.sellPayIds) {
        ModalApi.message(this.lang['c2c select the collection method'])
        return
      }
      if (!this.clickIsButton) {
        return
      }
      this.clickIsButton = false
      // 提交数据
      let slidingScalesValue = Decimal.div(this.slidingScalesValue, 100).toFixed(10)
      slidingScalesValue = commonFilter.fillDecimal(slidingScalesValue, 4)
      this.$host2.post('Trade/SendOrder', {
        CoinCode: this.pair.coinCode, // 虚拟币 Code
        CurrencyCode: this.pair.currencyCode,  // 法币 Code
        Price: this.isSlidingScales ? this.floatPrice : this.advertisePrice, // 申报价
        Quantity: this.advertiseQuantity, // 申报数量
        IsAcceptedWarranty: this.isBailn, // 是否接受无保证金交易
        TradeSide: 1, // 0为发布买广告 1为发布卖广告
        FluctuationRate: this.isSlidingScales ? slidingScalesValue : 0, // 使用浮动价格的时候  传浮动价格，否则传0
        PayTypes: '',
        PayIds: this.sellPayIds
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.closePublishAdvertisement()
          ModalApi.message(this.lang['success'])
          setTimeout(() => {
            this.$emit('refreshCurrentAdList')
            EventBus.$emit('refreshMyOrderList')
          }, 1000)
          this.empty()
        }
        this.clickIsButton = true
      })
    },
    // 关闭广告弹窗
    closePublishAdvertisement () {
      this.isShowPostAdBox = false
    },
    onClosed () {
      this.empty()
      this.sellBankInfo = ''
      this.advertisebuyOrSell = false
    }
  },
  mounted () {
    // CheckCurrencyOnInput函数只需要在mounted设置一次就行，不用在keyup调用
    CheckCurrencyOnInput(this, this.$refs.advertisePrice, 'advertisePrice', () => this.pair.cyPrec || 0)
    CheckCurrencyOnInput(this, this.$refs.slidingScalesValue, 'slidingScalesValue', 2)
    CheckCurrencyOnInput(this, this.$refs.advertiseQuantity, 'advertiseQuantity', () => this.pair.coinPrec || 0)
    // 点击空白 关闭语言框
    document.addEventListener('click', (e) => {
      this.isToggleSellBank = false
    })
  }
}
</script>
<style lang="less">
@import './../css/common.less';

/*买卖广告弹出样式*/
  .publishAdvertisement {
    position: relative;
    padding: 0 40px;
    width: 400px;
    overflow: hidden;
    border-radius: 8px;

    .close {
      position: absolute;
      right:40px;
      top: 14px;
      img {
        display: block;
        width: 10px;
      }
    }

    .title {
      font-weight: 300;

      dt {
        margin-bottom: 10px;
        width: 100%;
        height:40px;
        line-height: 40px;
        color: #fff;
        border-bottom: solid 1px #444c56;
      }

      dd {
        margin-bottom: 10px;
        width: 100%;
        height: 14px;
        line-height: 14px;
        color: #fff;
        font-size: 12px;

        span{
          float: right;
        }

        a {
          position: relative;
          float: right;
          margin-left: 10px;
          display: inline-block;
          width: 14px;
          height: 14px;
          background:url('./../images/pointPOut.png') no-repeat center;
          background-size: 14px 14px;

          em {
            position: absolute;
            right:-30px;
            top: 30px;
            z-index: 10;
            display: none;
            padding: 10px;
            line-height: 24px;
            width:156px;
            background: #2D77BF;
            color: #fff;
            font-size: 12px;
            border-radius: 5px;

            &:after {
              position: absolute;
              right: 30px;
              top: -5px;
              content: "";
              display:block;
              width:0;
              height: 0;
              border-bottom: solid 5px #2D77BF;
              border-left: solid 5px transparent;
              border-right: solid 5px transparent;
            }
          }

          &:hover em {
            display: inline-block;
          }
        }
      }
    }

    .tabNav {
      width: 100%;
      height:40px;
      background: #414750;
      border-radius: 5px;

      a {
        float: left;
        display: inline-block;
        width: 50%;
        text-align: center;
        line-height: 40px;
        font-weight: 300;
        font-size: 14px;
        color: #fff;

        &.green {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          background: #509F4C;
          color: #fff;
        }

        &.red {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          background: #B23030;
          color: #fff;
        }
      }
    }

    .list {
      overflow: hidden;

      li {
        overflow: hidden;

        label {
          display: block;
          padding:15px 0 5px 10px;
          color: #fff;

          span {
            display: inline-block;
            line-height: 18px;
          }
        }

        .form-group {
          position: relative;
          width: 100%;
          color: #fff;

          em{
            display: block;
            width: 100%;
            line-height: 40px;
            text-indent: 10px;
            background: #212A35;
            border-radius: 5px;
          }

          input {
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            width:100%;
            background: #384C63;
            border-radius: 5px;
            color: #fff;
            box-sizing: border-box;

            &.inputCurrentIndex {
              width: 122px;
              padding: 0 35px 0 10px;
            }
          }

          .cny {
            position: absolute;
            right: 10px;
            top: 10px;
            display: block;
            width: 60px;
            line-height: 20px;
            border-left: solid 1px rgba(255, 255, 255, 0.2);
            text-align: center;
            color: #fff;

            &.percentage {
              right: auto;
              left: 100px;
              width: auto;
              border:none;
              color: #fff;
            }
          }
        }

        .autoConfiguration {
          margin-left: 10px;
          padding-left: 20px;
          height: 20px;
          line-height: 20px;
          background: url('./../images/checkState1.png') no-repeat left center;
          color: #999;

          &.green{
            background: url('./../images/checkState4.png') no-repeat left center;
          }

          &.red{
            background: url('./../images/checkState4.png') no-repeat left center;
          }
        }

        .currentIndex {
          margin-left: 20px;
        }

        &.noMarginBuyer {
          line-height: 40px;

          label {
            line-height: 1;
          }
          a {
            float: left;
            margin-left: 60px;
            display: inline-block;
            padding-left: 30px;
            height: 20px;
            line-height: 20px;
            background: url('./../images/checkState1.png') no-repeat left center;
            font-size: 12px;


            &.active{
              background: url('./../images/checkState4.png') no-repeat left center;
            }
          }
        }
      }
    }

    .subtimBox {
      display: block;
      margin: 20px auto;
      width:50%;
      height: 40px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      border-radius: 5px;

      &.red {
        background: #B23030;
      }

      &.green {
        background: #509F4C;
      }

      &.active {
        background-color: #2A3441;
        cursor: not-allowed;
      }
    }

    .modePayment{

      .title{
        padding:15px 0 5px 10px;
        color: #fff;
        font-size: 12px;
      }

      .warn {
        padding-left: 10px;
        line-height: 18px;
        color: #FD3117;
        clear: both;
        font-size:12px;
      }

      .item {
        float: left;
        height: 36px;
        line-height: 36px;
        margin-bottom: 10px;
        font-size: 12px;
        em {
          float: left;
          display: block;
          width: 36px;
          height:36px;
          background: url('./../images/checkState1.png') no-repeat 11px center;
          &.active{
            background: url('./../images/checkState4.png') no-repeat 11px center;
          }
        }
        label {
          float: left;
          display: block;
          width: 344px;
          height: 36px;
          line-height: 36px;
          padding: 0 10px;
          color: #fff;
          border-radius: 3px;
          background-color: #212a35;

          img {
            vertical-align: middle;
            padding-right: 5px;
            display: block;
            float: left;
            margin-top: 9px;
          }
        }


        &.bank{
          position: relative;
          label {
            background-image: url('./../images/select2.png');
            background-repeat: no-repeat;
            background-position: 96% center;

            &.hover{
              background-image: url('./../images/select.png');
            }
          }

          .selectBank {
            position: absolute;
            top: 36px;
            left: 36px;
            width: 364px;
            background-color: #354353;
            a{
              padding:0 10px;
              color: #D4D4D4;
              display: block;
              border-bottom: solid 1px #5A6D86;

              &:last-child{
                border-bottom: none;
              }
            }
          }
        }

      }
    }
  }

@media (max-width: 1440px) {

  .publishAdvertisement {

    .tabNav {
      height:32px;

      a {
        line-height: 32px;
      }
    }

    .list {

      li {

        label {
          padding:5px 0 5px 10px;
        }

        .form-group {

          em{
            line-height: 32px;
          }

          input {
            height: 32px;
            line-height: 32px;
          }

          .cny {
            top: 5px;
            font-size: 12px;
          }
        }

        &.noMarginBuyer {
          line-height: 32px;
        }
      }
    }

    .subtimBox {
      margin: 12px auto;
      height: 32px;
      line-height: 32px;
    }

    .modePayment{

      .title{
        padding:5px 0 5px 10px;
      }

      .item {

        height: 30px;
        line-height: 30px;

        em {
          height:30px;
        }
        label {
          height: 30px;
          line-height: 30px;

          img {
            margin-top: 6px;
          }
        }

        &.bank{
          position: relative;

          .selectBank {
            top: 30px;
          }
        }
      }
    }
  }
}

</style>
